import Tabbar from '../../components/Tabbar/index.jsx'
import Swiper from '../../components/Swiper/index.jsx'
import Sidebar from '../../components/Sidebar/index.jsx'
import {useState, useEffect} from 'react'
import {useNavigate} from 'react-router-dom'
import request from '../../utils/request.jsx'
import { Image } from 'react-vant'
import './style.less'
const Classify = () => {
    const navigate = useNavigate()
    const [data, setData] = useState([])
    const [list,setList] = useState([])
    useEffect(() => {
        getCategory()
        onClickCategoryId()
    },[])
    const getCategory = async () => {
        let {data} = await request.get('/category')
        setData(data)
    }
    const onClickCategoryId = async categoryId => {
       const {data} = await request.get(categoryId > 0 ? `/product?categoryId=${categoryId}`:'/product')
       setList(data)
    }
    const onTabsClick = (id) => {
        navigate(`/commodity/${id}`)
    }
    return (
        <div>
           <div className="classify-conent">
                <div className="classify-left">
                    <Sidebar items={data} onClickCategoryId={onClickCategoryId}/>
                </div>
                <div
                   className="classify-right"
                >
                    <Swiper/>
                    <div>
                        {
                            list&&list.map((item) => (
                                <div
                                    key={item.id}
                                    onClick={() =>onTabsClick(item.id)}
                                >
                                    <Image src={item.image}/>
                                    <p>{item.title}</p>
                                </div>
                            ))
                        }
                    </div>
                </div>
           </div>
            
            <Tabbar />
        </div>
    )
}

export default Classify;